<template>
  <div class="container">
    <h2>name: {{ name }} age: {{ age }}</h2>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import { reactive, toRef, toRefs } from 'vue'
export default {
  name: 'App',
  setup() {
    const obj = reactive({
      name: 'ifer',
      age: 10,
      address: '河南',
      sex: '男',
    })
    // !可以把响应式对象中的所有属性转为单独的响应式对象（ref 对象）
    const { name,age } = toRefs(obj)
    const updateName = () => {
      // 不要忘记加 .value
      name.value = 'xxx'
      // !并且转换后的值和之前是关联的（修改原来的也会影响现在的）
      // obj.name = 'xxx'
    }
    return { name, age, updateName }
  },
}

/* const o = { info: { age: 18 } }
// 复杂数据类型解构/赋值，复制的是引用地址
const { info } = o
info.age = 19
console.log(o.info.age) // 19 */
</script>